<template>
    <div class="picking zy-content ">
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <div>
              <p class="label">{{$t('common.Entity')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.companyId"
                        @on-change="changeCompany"
                        clearable :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item,index) of tagList" :value="item.id" :key="index" :label="item.name">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('common.Warehouse')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.warehouseId" clearable
                        :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item,index) of warehouseList" :value="item.id" :key="index" :label="item.backupName"></Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('common.ApprovalStatus')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.approvalStatus"
                        clearable
                        :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item,index) of approvalList" :value="item.id" :key="index" :label="item.name"></Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('common.Appliedby')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.applyBy"
                        filterable clearable :placeholder="`${$t('common.selectInfo')}`"
                        :remote-method="getApplicationOAList"
                >
                  <Option v-for="item of OAList"
                          :value="item.id"
                          :key="item.id"
                          :label="item.showName"
                  />
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('common.ApprovalTime')}}</p>
              <div class="ipt">
                <DatePicker
                    v-model="applyTimeList"
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm:ss"
                    placement="bottom-end"
                    :placeholder="`${$t('common.selectInfo')}`"
                    @on-change="handleRangeChange"
                />
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn"
                        type="primary"
                        v-has="'approvalSearch'"
                        @click="changeNum()">
                  {{ $t('common.Query') }}</Button>
                <Button v-has="'approvalSearch'"
                    class="reset-btn"
                    @click="reset()"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>

      <div class="list-layout mt16">
          <div class="btns clear">
            <span class="title">{{ $t('common.listInformation') }}</span>
            <Button  v-has="'approvalExport'" @click="handleOutDel">{{ $t('common.batchExport') }}</Button>
              <Button @click="getTableColumns(columns)">
                  {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
              </Button>
        </div>
        <div class="tableContent">
          <Table
              class="resizable-table" border @on-column-width-resize="onColumnWidthResize" :columns="columnsList"
              ellipsis
              ref="selection"
              @on-selection-change="onSelectChange"
              :data="dataArr">
            <template slot-scope="{ row }" slot="approvalStatus">
              {{ (row.approvalStatus !== '') && approvalList.find(val => val.id === Number(row.approvalStatus)).name }}
            </template>
            <template slot-scope="{ row }" slot="action">
              <template v-if="row.approvalStatus !== 0">
                                    <span  class="operationBtn"
                                           v-has="'approvalModuleCheck'"
                                           @click="addRecipients('check',row)"><i class="iconfont zy-common-chakan"></i>{{ $t('common.Check') }}</span>
              </template>
              <template v-if="row.approvalStatus === 0">
                        <span class="operationBtn"
                              v-has="'approvalModuleApproval'"
                              @click="addRecipients('detail',row)"><i class="iconfont zy-common-shenpi"></i>{{ $t('common.Approval') }}</span>

                <span class="operationBtn"
                      v-has="'approvalModuleEdit'"
                      @click="addRecipients('edit',row)"><i class="iconfont zy-common-bianji "></i>{{ $t('common.Edit') }}</span>
              </template>
            </template>
          </Table>
        </div>
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total" :selected="ids.length" />
          <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum"
                @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
        </div>
      </div>
    </div>
</template>

<script>
import fileDownload from 'js-file-download'
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: "picking",
    components: {},
    mixins:[toggleTableOperation],
    data() {
        return {
            applyTimeList: [],
            formInfo: {},
            selectList: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
            searchParams: {
                companyId: '',
                warehouseId: '',
                approvalStatus: '',
                applyStartTime: '',
                applyEndTime: '',
                applyBy: ''
            },
            pageSizeOption: [10, 20, 30, 40],
            warehouseList: [],
            tagList: [{id: '', name: '全部'}],
            applyList: [
                {id: 0, name: '保存'},
                {id: 1, name: '已提交'},
                {id: 2, name: '撤回'},
                {id: 3, name: '已驳回'},
            ],
            approvalList: [
                {id: 0, name: '待审批'},
                {id: 1, name: '审批通过'},
                {id: 2, name: '驳回'},
                {id: 3, name: '审批未通过'},
            ],
            columns: [
                {type: 'selection', width: 60, align: 'center'},
                {
                    title: `${this.$t('common.ApplieTime')}`,
                    key: 'applyTime',
                    align: "center",
                    minWidth: 180,
                    resizable: true
                },
                {
                    title: `${this.$t('common.ApprovalTime')}`,
                    key: 'approvalTime',
                    align: "center",
                    minWidth: 180,
                    resizable: true
                },
                {
                    title: `${this.$t('common.ApprovalStatus')}`,
                    slot: "approvalStatus",
                    key: 'approvalStatus',
                    align: "center",
                    minWidth: 150,
                    resizable: true
                },
                {
                    title: `${this.$t('common.Entity')}`,
                    key: 'companyName',
                    align: "center",
                    minWidth: 150,
                    resizable: true
                },
                {
                    title: `${this.$t('common.Warehouse')}`,
                    key: 'warehouseName',
                    align: "center",
                    minWidth: 150,
                    resizable: true
                },
                {
                    title: `${this.$t('common.ApplicationQuantit')}`,
                    key: 'applyNum',
                    align: "center",
                    minWidth: 180,
                    resizable: true
                },
                {
                    title: `${this.$t('common.Appliedby')}`,
                    key: 'applyBy',
                    align: "center",
                    minWidth: 150,
                    resizable: true
                },
                {
                    title: `${this.$t('common.Approvedby')}`,
                    key: 'approvalBy',
                    align: "center",
                    minWidth: 150,
                    resizable: true
                },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    minWidth: 200,
                    align: "center",
                    fixed: 'right'
                }
            ],
            assetsList: [],
            dataArr: [],
            OAList: [],
            timerId: null,
            ids: []
        }
    },
    created() {
        this.getTableColumnsWidth(this.columns)
        this.getCompanyList()
        this.searchList()
    },
    methods: {
        reset(){
            this.searchParams = {};
            this.applyTimeList = []
            this.searchList()
        },
        getApplicationOAList(query) {
            if (query !== '') {
                this.loading = true
                this.axios({
                    method: 'get',
                    url: '/basic/user/searchOAUser',
                    params: {
                        key: query
                    }
                }).then(res => {
                    if (res.code === 200) {
                        this.OAList = res.data.map(item => {
                            return {
                                ...item,
                                showName: item.empno + '----' + item.username
                            }
                        })
                    } else {
                        this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                    }
                }).finally(() => {
                    this.loading = false
                })
            } else {
                this.OAList = []
            }
        },
        addRecipients(str, row) {
            let query = {
                status: str,
                id: ''
            }
            if (row) {
                query.id = row.id
            }
            this.$router.push({
                path: '/spareParts/operations/approvalModule',
                query
            })
        },
        changeCompany(val) {
            this.warehouseList = []
            let companyId;
            if (val) {
                companyId = this.tagList.find(item => item.id == val).id
                this.getwarehouseList(companyId)
            } else {
                this.searchParams.warehouseId = ''
            }
        },
        getwarehouseList(companyId) {
            this.axios({
                method: 'post',
                url: '/dms/dmsBackupConfig/queryBackupsByCompany',
                data: {
                    companyId
                }
            }).then(res => {
                if (res.data && res.data.length) {
                    this.warehouseList = res.data
                }
            })
        },
        assetsChange() {
            if (this.timerId) {
                clearTimeout(this.timerId)
            }
            this.timerId = setTimeout(() => {
                this.axios({
                    method: 'get',
                    url: '/dms/dmsCheck/calculationAsset',
                    params: {
                        original: Number(this.formInfo.assetsOriginal),
                        id: this.formInfo.id,
                        assetId: this.formInfo.assetId
                    }
                }).then(res => {
                    this.formInfo.assets = res.data
                })
            }, 600)
        },
        handleCancel() {
            this.resultInfoVis = false
        },
        handleOk() {
            this.axios({
                method: 'post',
                url: '/dms/dmsCheck/updateAsset',
                data: {
                    original: Number(this.formInfo.assetsOriginal),
                    id: this.formInfo.id,
                    assetId: this.formInfo.assetId,
                    assets: this.formInfo.assets
                }
            }).then((res) => {
                this.handleCancel()
            })
        },
        onSelectChange(selectionData) {
            this.selectList = selectionData
            let arr = []
            if (selectionData && selectionData.length) {
                selectionData.forEach(item => {
                    arr.push(item.id)
                })
            }
            this.ids = arr
        },
        //公司列表
        getCompanyList() {
            this.axios({
                method: 'get',
                url: '/basic/company/getCompanyListByUser',
                params: {}
            }).then(res => {
                
                if (res.code === 200) {
                    let arr = res.data.map(item => {
                        return {
                            ...item,
                            id: item.id.toString()
                        }
                    })
                    this.tagList = [...this.tagList, ...arr]
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        handleRangeChange(val) {
            this.searchParams.applyStartTime = val[0]
            this.searchParams.applyEndTime = val[1]
        },
        //删除
        deleteList(row) {
            const ids = [row].map(val => val.id)
            this.axios({
                method: 'get',
                url: `/dms/applyUse/delete?ids=${ids.join(',')}`
            }).then(res => {
                if (res.code == 200) {
                    this.searchList()
                }
            })
        },
        //批量导出
        handleOutDel() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ids: this.ids.toString(),
                ...this.searchParams
            }
            const filName = '领用审批'
            this.axios({
                method: 'get',
                url: '/dms/applyUse/export',
                responseType: 'blob',
                params
            }).then(res => {
                fileDownload(res, filName + '.xlsx')
            })
        },
        //刷新
        handleFresh() {
            this.searchList();
        },
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        searchList() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ...this.searchParams
            }
            this.axios({
                method: 'get',
                url: '/dms/applyUse/approvalList',
                params: params
            }).then(res => {
                if (res.code === 200) {
                    this.dataArr = res.data.list
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.picking {

    .formList {
        padding: 30px;

        .btn {
            margin-top: 20px;
            text-align: center;
            width: 100%;
            height: 40px;
        }

        .inputBorder {
            border: 1px solid #dcdee2;
            border-radius: 4px;

        }
    }
}
</style>

